<template>
  <div>
    <div class="mybread">
      <el-breadcrumb separator-class="el-icon-arrow-right" v-if="bData.length">
        <el-breadcrumb-item><i class="iconfont icon-shouye"></i></el-breadcrumb-item>
        <el-breadcrumb-item v-for="item in bData" :key="item.name" :to="item.path">{{item.name}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <router-view class="maincontent"></router-view>
  </div>
</template>

<script>
import routeArr from '@/router/authRoutes'
export default {
  computed: {
    bData() {
      let nowRoute = this.$route.name
      if(nowRoute=='home') return []
      let arr = []
      let children = routeArr[0].children
      let item = children.find(item => {
        return item.name === nowRoute
      })
      arr.push({name: item.zhName, path: ''})
      if(item.name !== item.auth) {
        let pitem = children.find(my => {
          return my.name === item.auth
        })
        arr.unshift({name: pitem.zhName, path: '/home/'+pitem.name})
      }
      if(arr.length){
        return arr
      }
      return []
    }
  }
}
</script>


<style lang="scss" scoped>
$height: 50px;
.bigcon{
  padding: 0 10px;
}
.mybread{
  height: $height;
  display: flex;
  align-items: center;
}
.maincontent{
  background: #fff;
  padding: 17px;
  position: relative;
}
</style>
